<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../easyui/jquery.min.js"></script>
    <script src="../easyui/jquery.easyui.min.js"></script>
    <script src="../easyui/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" href="../easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" href="../easyui/themes/icon.css">
    <style>
        .textbox {
            height:22px;
            padding:0 2px;
        }
        body{
            margin: 0;
            padding: 0;
        }
    </style>
<script>
    $(function(){
        $("#datagrid").datagrid({
            url:"datagrid.json",
            columns:[[
                {
                    field:"id",
                    title:"标识符",
                    checkbox:true
                },{
                    field:"username",
                    title:"用户名"
                },{
                    field:"email",
                    title:"电子邮件"
                },{
                    field:"department",
                    title:"所属部门",
                    formatter:function(val,row,index){
                        //如果val有字段值并且是对象类型，就必然有name属性
                        if(typeof val !=='object')
                        {
                            return '';
                        }
                        else{
                            return val.name;
                        }
                    }
                },{
                    field:"action",
                    title:"操作",
                    formatter:function(val,row,index){
                        if (row.editing){
                            var s = '<a href="#" onclick="saverow(this)">Save</a> ';
                            var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
                            return s+c;
                        } else {
                            var e = '<a href="#" onclick="editrow(this)">Edit</a> ';
                            var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
                            return e+d;
                        }
                    }
                }
            ]],
            idField:"id",
            toolbar:"#datagrid-toolbar"
        });
        $("#dlg").dialog({
            title:'编辑',
            closed:'true',
            buttons:[
                {
                    text:'确定',
                    iconCls:'icon-ok',
                    handler:function(){
                        var rowObj = $("#datagrid").datagrid("getSelected");
                        console.log(rowObj);
                        if(rowObj !== null){
//                            var index = $("#datagrid").datagrid("getRowIndex",rowObj);
                            var index = $("#datagrid").datagrid("getRowIndex",$("#id").val());
                            console.log(index);
                            var row = {
                                id:$("#id").val(),
                                username:$("#username").val(),
                                email:$("#email").val()
                            };
                            $("#datagrid").datagrid("updateRow",{
                                index:index,
                                row:row
                            });
                        }
                        $("#dlg").dialog("close");
                    }
                },
                {
                    text:'取消',
                    iconCls:'icon-cancel',
                    handler:function(){
                        $("#dlg").dialog("close");
                    }
                }
            ]
        })
    })
    var op={
        edit:function(){
            var selected = $("#datagrid").datagrid("getSelected");
            if(selected!==null){
                $("#id").val(selected.id);
                $("#id").attr("disabled","true");
                $("#username").val(selected.username);
                $("#email").val(selected.email);
                $("#dlg").dialog("open");
            }
//            alert("编辑");
        },
        add:function(){
            $("#id").attr("disabled","true");
//            $("#")
        },
        del:function(){
            var checkeds = $('#datagrid').datagrid('getChecked');
            for(var i in checkeds){
                console.log(checkeds[i]);
            }
//            console.log(checkeds);
            console.log('-------------------');
            var selecteds = $('#datagrid').datagrid('getSelections')
//            console.log(selecteds);
            var id = [];
            for(var i in selecteds){
//                console.log(selecteds[i]);
                id.push(selecteds[i].id);
            }
//            $.post('/delete',{id:id},function(data,statusCode){
//                console.log('This is a test');
//            })
            $.ajax({
                url:'/delete',
                type:'post',
                data:{id:id},
                traditional:true,
                success:function(){
                    console.log('This is a test');
                },
                dataType:'json'
            });
            console.log(id);
        }
    }
</script>
</head>
<body>
<table id="datagrid"></table>
<div id="datagrid-toolbar">
    <a class="easyui-linkbutton" iconCls="icon-add" onclick="op.add();">添加</a>
    <a class="easyui-linkbutton" iconCls="icon-remove" onclick="op.del();">删除</a>
    <a class="easyui-linkbutton" iconCls="icon-edit" onclick="op.edit();">修改</a>
</div>
    <div id="dlg">

        <p>
            <label for="id">标识符</label>
            <input name="id" type="text" id="id" class="textbox">
        </p>
        <p>
        <label for="username">用户名</label>
        <input name="username" type="text" id="username" class="textbox">
        </p>
        <!--<p>-->
            <!--<label for="email">邮箱</label>-->
            <!--<input name="email" type="text" id="email" class="textbox">-->
        <!--</p>-->
    </div>
</body>
</html>

